<template>
	<view class="user-box">
		<view class="user-center">
			<view class="flex justify-between align-center h109 u-border-bottom" @click="uploadImg">
				<view class="f28" style="color: #333333;">
					头像
				</view>
				<view class="flex align-center">
					<image :src="userInfo.headImg" class="w88 h88 r44" mode=""></image>
					<!-- <image v-else src="../../../static/img.jpg" class="w88 h88 r44" mode=""></image> -->
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom">
				<view class="f28" style="color: #333333;">
					昵称
				</view>
				<view class="f28 flex align-center text-center" style="color: #333333;">
					<input type="text" @blur="addUserName" v-model="userInfo.nickName" style="width: 160rpx; font-size: 22rpx;" />
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom" @click="showAge = true">
				<view class="f28" style="color: #333333;">
					年龄
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					{{userInfo.age ? userInfo.age : ''}}
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom" @click="l.to('/pages/me/setUser/introduce')">
				<view class="f28" style="color: #333333;">
					自我介绍
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom" @click="showhtList = true">
				<view class="f28" style="color: #333333;">
					身高
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					{{userInfo.height ? userInfo.height : ''}} CM
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom" @click="showKg = true">
				<view class="f28" style="color: #333333;">
					体重
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					{{userInfo.weight ? userInfo.weight  : 0}} Kg
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom" @click="showRegion = true">
				<view class="f28" style="color: #333333;">
					地区
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					{{region ? region : ''}}
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>



			<view class="flex justify-between align-center h109 u-border-bottom" @click="locaMap">
				<view class="f28" style="color: #333333;">
					约会地
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center " style="color: #333333;">
					<text class="w500 f20" style="white-space:normal ;overflow: hidden;">{{userInfo.place ? userInfo.place : ''}}</text>
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>



			<view class="flex justify-between align-center h109 u-border-bottom" @click="l.to('/pages/me/setUser/vehicle')">
				<view class="f28" style="color: #333333;">
					座驾
					<text style="color: #FF1212;">*</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>



			<view class=" ">
				<view class="flex justify-between align-center h109">
					<view class="f28" style="color: #333333;">
						我的标签
						<text style="color: #FF1212;">*</text>
					</view>
					<view class="f28 flex align-center" style="color: #333333;">

					</view>
				</view>
				<view class="f26 flex flex-wrap">
					<!-- <u-tag text="一丘之貉"
						style="padding: 20rpx 40rpx; 
						border-radius: 10rpx; 
						margin-right: 50rpx;" color="#1F1F1F" bg-color="#F5F5F5" mode="dark" /> -->
					<view class="grid bgc-red" v-for="(item,index) in list" :key="index">
						<text>{{item.tag}}</text>
					</view>
					<view class="add-border mt30" @click="l.to('/pages/me/setUser/addGrid')">
						<i class="cuIcon-add f46" style="color: #40C6A8;"></i>
					</view>

				</view>
			</view>


		</view>


		<!-- 年龄 -->
		<u-picker v-model="showAge" mode="time" @confirm="addConfirm"></u-picker>

		<!-- 体重 -->
		<u-select v-model="showKg" :list="listFrom" @confirm="addKg"></u-select>

		<!-- 身高 -->
		<u-select v-model="showhtList" :list="heightList" @confirm="addHeight"></u-select>

		<!-- 地区 -->
		<u-picker v-model="showRegion" mode="region" @confirm="addRegion"></u-picker>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showKg: false,
				showAge: false,
				showRegion: false,
				showhtList: false,
				address: '',
				region: '',
				age: '',
				kg: '',
				height: '',
				listFrom: [{
					label: '40kg'
				}, {
					label: '41kg'
				}, {
					label: '42kg'
				}, {
					label: '43kg'
				}, {
					label: '44kg'
				}, {
					label: '45kg'
				}, {
					label: '46kg'
				}, {
					label: '47kg'
				}, {
					label: '48kg'
				}, {
					label: '49kg'
				}, {
					label: '50kg'
				}, {
					label: '51kg'
				}, {
					label: '52kg'
				}, {
					label: '53kg'
				}, {
					label: '54kg'
				}, {
					label: '55kg'
				}, {
					label: '56kg'
				}, {
					label: '57kg'
				}, {
					label: '58kg'
				}, {
					label: '59kg'
				}, {
					label: '60kg'
				}, ],
				heightList: [{
					label: '140cm',
				}, {
					label: '141cm',
				}, {
					label: '142cm',
				}, {
					label: '143cm',
				}, {
					label: '144cm',
				}, {
					label: '145cm',
				}, {
					label: '146cm',
				}, {
					label: '147cm',
				}, {
					label: '148cm',
				}, {
					label: '149cm',
				}, {
					label: '150cm',
				}, {
					label: '151cm',
				}, {
					label: '152cm',
				}, {
					label: '153cm',
				}, {
					label: '154cm',
				}, {
					label: '155cm',
				}, {
					label: '156cm',
				}, {
					label: '157cm',
				}, {
					label: '158cm',
				}, {
					label: '159cm',
				}, {
					label: '160cm',
				}, {
					label: '161cm',
				}, {
					label: '162cm',
				}, {
					label: '163cm',
				}, {
					label: '164cm',
				}, {
					label: '165cm',
				}, {
					label: '166cm',
				}, {
					label: '167cm',
				}, {
					label: '168cm',
				}, {
					label: '169cm',
				}, {
					label: '170cm',
				}, {
					label: '171cm',
				}, {
					label: '172cm',
				}, {
					label: '173cm',
				}, {
					label: '174cm',
				}, {
					label: '175cm',
				}, {
					label: '176cm',
				}, {
					label: '177cm',
				}, {
					label: '178cm',
				}, {
					label: '179cm',
				}, {
					label: '180cm',
				}, {
					label: '181cm',
				}, {
					label: '182cm',
				}, {
					label: '183cm',
				}, {
					label: '184cm'
				}, {
					label: '185cm'
				}, {
					label: '186cm'
				}, {
					label: '187cm'
				}, {
					label: '188cm'
				}, {
					label: '189cm'
				}, {
					label: '190cm'
				}, {
					label: '191cm'
				}, ],
				userInfo: {},
				phoneImage: '',
				list: [],
			};
		},
		onShow() {},
		onLoad(e) {
			this.getUserInfo()
			this.getUserList()
		},
		methods: {
			async getUserInfo() {
				const res = await this.$u.get('api/user/queryUser')
				this.userInfo = res.data
			},
			
			async getUserList() {
				const res = await this.$u.get('api/user/sys/tag/list')
				this.list = res.data
			},

			async addUser() {
				const res = await this.$u.put('api/user/modifyUser', {
					headImg: this.phoneImage,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},

			async addUserName() {
				const res = await this.$u.put('api/user/modifyUser', {
					nickName: this.userInfo.nickName,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},

			uploadImg() {
				var imgUrl = {}
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						uni.uploadFile({
							url: this.UPLOADFILE, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								imgUrl = JSON.parse(uploadFileRes.data)
								this.phoneImage = imgUrl.data
								console.log('111', this.phoneImage);
								this.addUser()
							}
						});
					}
				});
			},
			async addConfirm(e) {
				this.age = e.year + '-' + e.month + '-' + e.day
				console.log(this.age)
				//出生时间 毫秒
				var birthDayTime = new Date(this.age).getTime();
				//当前时间 毫秒
				var nowTime = new Date().getTime();
				//一年毫秒数(365 * 86400000 = 31536000000)

				this.age = Math.ceil((nowTime - birthDayTime) / 31536000000);


				const res = await this.$u.put('api/user/modifyUser', {
					age: this.age + '',
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},
			async addRegion(e) {
				this.region = e.province.label + '-' + e.city.label + '-' + e.area.label
				
				const res = await this.$u.put('api/user/modifyUser', {
					addr: this.region,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},
			async addKg(e) {
				this.kg = e[0].label
				
				var num = parseInt(this.kg);
				const res = await this.$u.put('api/user/modifyUser', {
					weight: num,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},

			async addHeight(e) {
				this.height = e[0].label
				var num = parseInt(this.height);
				const res = await this.$u.put('api/user/modifyUser', {
					height: num,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},
			
			async mapYue() {
				const res = await this.$u.put('api/user/modifyUser', {
					place: this.address,
				})
				if (res.code == 200) {
					this.getUserInfo()
					this.l.msgg(res.msg)
				}
			},

			locaMap() {
				var _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						_this.address = res.address
						_this.mapYue()
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.user-box {

		.user-center {
			padding: 0 30rpx;
		}

		.add-border {
			// border-radius: 50rpx;
			// padding: 18rpx 46rpx;
			// border: 3rpx solid #40C6A8;
			width: 146rpx;
			height: 86rpx;
			border: 3rpx solid #40C6A8;
			border-radius: 46rpx;
			text-align: center;
			line-height: 86rpx;
		}

		.bgc-red {
			color: #1F1F1F;
			font-size: 26rpx;
			margin-right: 57rpx;
			padding: 20rpx 50rpx;
			background-color: #F5F5F5;
			border-radius: 10rpx;
		}
	}
</style>
